$async-action-tab: (
  load-more-height: 30px,
);

@include b(async-action-tab) {
  @include set-component-css-var('async-action-tab', $async-action-tab);

  width: 100%;
  height: 100%;

  @include e(item){
    min-height: 60px;
    padding: getCssVar('spacing', 'tight') 0;
  }

  @include e(nodata){
    @include flex(row, center, center);

    height: calc(100% - getCssVar(async-action-tab, load-more-height))
  }

  @include e(load-more){
    height: getCssVar(async-action-tab, load-more-height);
    line-height: getCssVar(async-action-tab, load-more-height);
    text-align: center;

    &:hover{
      color: getCssVar(color, primary, hover);
      cursor: pointer;
    }
  }
}